<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- BEGIN 全局样式 -->
    <link rel="stylesheet" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="class-schedule/class-schedule-v1.0.1.css">
    <!--<link rel="stylesheet" href="../../../lib/fullcalendar/fullcalendar.min.css">-->
    <!--<link rel="stylesheet" href="../../../lib/fullcalendar/fullcalendar.print.min.css">-->
    <link rel="stylesheet" href="../../../css/reset-diy.css" type="text/css">
    <!--<link rel="stylesheet" href="../../../lib/jedate/skin/jedate-blue.css">-->
    <link rel="stylesheet" href="semester-setting.css">
    <title>全日考勤时间设置</title>
    <style>html{margin:0;background: white;}</style>
</head>
<body>

<div class="container-full">
    <div id="class-schedule">
        <!-- 年,月 -->
        <div id="left">
            <div id="eleYear"></div>
            <div class="mt-30">
                <div id="eleMonth"></div>
            </div>
        </div>

        <!-- 日期 -->
        <div id="right">
            <div id="eleDay"></div>
            <div class="hint">
                <div class="mt-15"><span class="dayNum working">1</span>工作日</div>
                <div class="not-work"><span class="dayNum day-remove">1</span>非工作日</div>
            </div>

            <div class="buttons text-center invisible">
                <button class="btn-submit btn btn-primary"><span class="glyphicon glyphicon-modal-window"></span> 保存修改</button>
                <span class="btn-reset btn btn-danger"><span class="glyphicon glyphicon-repeat"></span> 放弃修改</span>
            </div>
        </div>
    </div>

</div>


<!--核心脚本sss-->
<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="../../../js/excanvas.min.js"></script>
<script src="../../../js/respond.min.js"></script>
<![endif]-->
<!--加密插件sss 必须放在jquery.myPlugIn_v1.0.js前面-->
<script src="../../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
<!--加密插件eee-->

<!--<script src="../../../js/bootstrap.min.js" type="text/javascript"></script>-->
<script src="class-schedule/class-schedule-v1.0.1.min.js"></script>
<script src="../../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="../../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../../../js/work-box.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>

<script>
    var T = new Extend_base();
    jQuery(document).ready(function () {
        function Semester() {
            this.initCalendar();
            this.getData();
            this.clickEvent();
        }

        Semester.prototype = {
            year: [], // 后台给的整年日历,已转为12个数组对象
            nowYear: 2018, // 请求到的年份,动态修改
            nowMonth: 1,
            initCalendar: function () {
                var _this = this;

                var today = new Date();
                var _year = today.getFullYear(),
                    _month = today.getMonth() + 1;

                this.nowYear = _year;
                this.nowMonth = _month;

                $("#class-schedule").classSchedule({
                    yearClickCallBack: function (yearNum) {
                        T.ajaxSecret(url_join("calendar/show"), "post", {year: yearNum}, function (res) {
                            _this.year = _this.toArr(res.data);
                            _this.nowYear = yearNum;
                            _this.renderMonthSelect(_this.nowMonth);
                        });
                    },
                    monthClickCallBack: function (monthNum) {
                        _this.nowMonth = monthNum;
                        _this.renderMonthSelect(_this.nowMonth);
                    },
                    dayClickCallBack: function () {
                        $(".buttons").removeClass("invisible");
                    }
                });
            },
            getData: function () {
                var _this = this;
                T.ajaxSecret(url_join("calendar/show"), "post", {year: _this.nowYear}, function (res) {
                    _this.year = _this.toArr(res.data);
                    _this.renderMonthSelect();
                });
            },
            renderMonthSelect: function (month) {
                // 初始化月份
                var _month = 1;
                if (month) {
                    _month = month;
                } else {
                    var today = new Date();
                    _month = today.getMonth() + 1;
                }

                // 样式调整
                var monthArr = this.year[_month - 1];
                // var monthArr2 = this.year[_month - 1];
                // var monthArr3 = this.year[_month - 1];

                // 渲染样式
                var span = $("#eleDay span.current-month");
                // var span2 = $("#eleDay span.prev-month"); // 有一个问题: 上个月可能是上一年的情况
                // var span3 = $("#eleDay span.next-month");

                span.each(function (i, v) {
                    var obj = monthArr[i];
                    for (var key in obj) {
                        if (obj[key] == 1) {
                            $(v).addClass("working").removeClass("day-remove");
                        } else {
                            $(v).addClass("day-remove").removeClass("working");
                        }
                    }
                });
            },
            clickEvent: function () {
                var _this = this;
                $(".btn-reset").on("click", function () {
                    _this.renderMonthSelect(_this.nowMonth);
                });

                $(".btn-submit").on("click", function () {
                    var arr = [];
                    var obj = {};
                    var span = $(".current-month");
                    span.each(function (i, v) {
                        if ($(v).hasClass("flag")) {
                            if ($(v).hasClass("working")) {
                                obj[_this.nowYear + "-" + T.addZero(_this.nowMonth) + "-" + T.addZero($(v).text())] = 1;
                            } else {
                                obj[_this.nowYear + "-" + T.addZero(_this.nowMonth) + "-" + T.addZero($(v).text())] = 0;
                            }
                        }
                    });
                    _this.submit(obj);
                });
            },
            submit: function (data) {
                // console.log("提交的数据: ", data);
                T.ajaxSecret(url_join("calendar/update"), "post", {calendar: data}, function (res) {
                    layer.msg("操作成功",{icon:1});
                    setTimeout(function (){
                        window.location.reload();
                    },500);
                });
            },

            // 将服务器拿到的日历做成一个数组
            toArr: function (obj) {
                var arr = [], pattern = "";
                for (var i = 0; i < 12; i++) {

                    if (i < 9) {
                        pattern = eval('/^\\d{4}\\-0' + (i + 1) + '/');
                    } else {
                        var num = 0;
                        if (i == 9) {
                            num = 0;
                        } else if (i == 10) {
                            num = 1;
                        } else {
                            num = 2;
                        }
                        pattern = eval('/^\\d{4}\\-1' + num + '/');
                    }

                    var tem = [];
                    for (var key in obj) {
                        if (pattern.test(key)) {
                            var _objTem = {};
                            _objTem[key] = obj[key];
                            tem.push(_objTem);
                        }
                    }
                    arr.push(tem);
                }
                return arr;
            },
            constructor: "Semester",
        };
        new Semester();
    });
</script>

</body>
</html>